<template>
	<div>
		<div class="return-home">
			<router-link to="/cation">
				<p class="return-text">
					<van-icon name="arrow-left" />返回
				</p>
			</router-link>
			<p class="bufan">不凡</p>
		</div>
		<!-- 顶部标签栏 -->
		<van-tabs v-model="activeName" @click="tabEvents">
		  <van-tab  :name="item.name"  :title="item.name" v-for="item in navData" :key="item.id"></van-tab>
		</van-tabs>
		<!-- 小灰条 -->
		<span class="line"></span>
		<!-- 文字区 -->
		<div class="son-text">
		<p class="son-text1">{{currentNav.name}}</p>
		<p class="son-text2">{{currentNav.front_desc}}</p>
		</div>
		<!-- 展示图片区 -->
		<div class="son-img">
			<div class="son-img-item" v-for="item in list" :key="item.id">
				<router-link :to="`/cation/cationSon/cationSonInfo?id=${item.id}`">
				<img :src="item.list_pic_url" alt="">
				</router-link>
				<p class="son-img-text">{{item.name}}</p>
				<p class="son-img-text2"> &#36{{item.retail_price}}</p>
			</div>
		</div>
		
		<!-- 尾巴标签 -->
	</div>
</template>

<script>
	import{
		categoryNav,
		goodsList,
		
	}  from "../../../api/cation/index.js"
	
	export default {
	  data() {
	    return {
	      activeName:"",
		  navData:[],
		  currentNav:[],
		  list:[],
		  
	    };
	  },
	  created(){
		  this.init()
	  },
	  methods:{
		  async init(){
			  var res = await categoryNav({
				  id:this.$route.query.id
			  })
			  console.log(res)
			  this.navData = res.data.navData
			  this.currentNav = res.data.currentNav
			  this.activeName = res.data.currentNav.name
			  
			  var result = await goodsList({
			  	categoryId:this.$route.query.id	
			  })
			  console.log(result)
			  this.list = result.data.data
			
		  
		  },
		 
		  async  tabEvents(val1,val2){
		  var id = this.navData.find(ele =>ele.name == val1).id;
		  
		  var result = await goodsList({
		  	categoryId:id	
		  })
		   this.list = result.data.data
		    this.currentNav = result.data.currentNav
		  }
	  }
	};
</script>

<style scoped lang="scss">
	@import "../scss/index.scss";
	// 头部
		.return-home {
			display: flex;
			font-size: 16px;
			margin-left: 20px;
			
	
			.return-text {
				color: #000000;
			}
	
			.bufan {
				margin-left: 60px;
			}
		}
		// 小灰条
		.line{
			display: block;
			width: 100%;
			height: 10px;
			background-color:#F4F4F4;
		}
		// 文字区
		.son-text{
			text-align: center;
			.son-text1{
				margin-bottom: .24rem;
				    font-size: .4rem;
				    color: #333;
			}
			.son-text2{
				
				    height: .32rem;
				    font-size: .32rem;
				    color: #999;
			}
		}
		// 展示图片区
		.son-img{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.son-img-item{
				width: 45%;
				 margin-left: 10px;
				
				text-align: center;
				img{
					width: 150px;
					height: 150px;
				}
				.son-img-text{
					margin: .2rem 0 .29333rem 0;
					    text-align: center;
					    padding: 0 .26667rem;
					    font-size: .32rem;
				}
				.son-img-text2{
					font-size: .4rem;
					    color: red;
				}
			}
		}
</style>
